<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二维码</title>
    <style>
        body {
            margin: 0;
        }
        .header {
            width: 100%;
            height: 60px;
            background-color: #f0f0f0;
            border-bottom: 2px solid #ccc;
        }
        .header .btn-toggle {
            float: right;
            padding: 10px 30px;
            height: 20px;
            line-height: 20px;
            background-color: skyblue;
            margin: 10px 150px 10px 0 ;
            cursor: pointer;
            color: #fff;
        }
        .header .code {
            /* 隐藏二维码 */
            display: none;
            position: absolute;
            right: 20px;
            top: 60px;
            border: 2px solid #ccc;
            border-top: 0;
            z-index: 1000;
            background-color: #fff;
            padding: 20px 20px 20px 20px;
        }

        .header .code .btn-close {
            position: absolute;
            top: 0;
            right: 0;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            background-color: #ccc;
            cursor: pointer;
        }
        body {
            user-select: none;
        }
    </style>
</head>
<body>

    <div class="header">
        <div class="btn btn-toggle"> 切换 </div>

        <div class="code">
            <span class="btn btn-close">×</span>
            <img src="./code.png" alt="">
        </div>

    </div>
    
    <script>
        // 要求：
            // 点击“切换”， 显示二维码 ,隐藏二维码 
            //点击 “关闭” 按钮 ,隐藏二维码  
        // 步骤：
            // 1、获取元素
            // 2、事件绑定
            // 3、书写处理逻辑

        // 编码：
        // 面向对象
            // 属性： .header标签  .code标签  flag 布尔值
            // 方法： 切换显示和隐藏    关闭


        // 构造函数
        var Page = function(){
            // 添加属性
            this.header = document.querySelector(".header");
            this.code = document.querySelector(".code");
            this.flag = true;//布尔值
        }
        // 添加方法
        // 切换
        Page.prototype.toggle = function() {// 函数作用域1
            // console.log(this);// p1   实例对象
            var _self = this; // 记录当前函数作用域的this
            this.header.onclick = function(event) {// 函数作用域2
                // console.log(this);// this.header  事件的调用者
                // console.log(this.flag);// undefined
                // console.log(_self.flag);// true  
                // 事件源头
                var el = event.target;
                // 获取按钮的类名
                var cName = el.className;
                // 点击切换按钮
                if(cName.indexOf("btn-toggle") > -1 ){
                    // 切换二维码逻辑
                    if(_self.flag){
                        _self.code.style["display"]="block";//显示
                        _self.flag = false;
                    }else {
                        _self.code.style["display"]="none"; // 隐藏
                        _self.flag = true;
                    }
                }
                // 点击关闭按钮
                if(cName.indexOf("btn-close") > -1 ){
                    // 关闭二维码逻辑
                    // _self.code.style["display"]="none"; // 隐藏
                    // _self.flag = true;
                    _self.close();
                }
            }

        }
        // 关闭
        Page.prototype.close = function() {// 函数作用域1
            // 关闭二维码逻辑
            this.code.style["display"]="none"; // 隐藏
            this.flag = true;
        }
        // 初始化
        Page.prototype.init = function() {
            // 切换
            this.toggle();
        }

        // 创建实例对象
        // var p1 = new Page();
        // 初始化
        // p1.init()

        // 简写
        new Page().init();
       




       
    </script>
</body>
</html>